·<template>
    <div  class="UserLink">
        <div id="UserLink"></div>
    </div>
</template>

<script>
    import Highcharts from 'highcharts/highstock';
    export default {
        name: "",
        mounted() {
            this.moreChart();
        },
        methods: {
            moreChart() {
                if (this.chart) {
                    this.chart.destroy();
                }
                var chart = Highcharts.chart('UserLink', { // eslint-disable-line no-unused-vars
                    chart: {
                        type: 'line'
                    },
                    title: {
                        text: 'SL-短链接新增用户及访问量折线图'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    },
                    yAxis: {
                        title: {
                            text: '人数'
                        }
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                // 开启数据标签
                                enabled: true
                            },
                            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                            enableMouseTracking: false
                        }
                    },
                    series: [{
                        name: '新增用户',
                        data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9]
                    }, {
                        name: '新增访问量',
                        data: [3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4]
                    }],
                    credits: {
                        enabled: false     //不显示LOGO
                    }
                });

            }

        }
    }
</script>

<style>
    .UserLink{
        width: 50%;
        height: 100%;
        display:inline-block;
        float: right;
    }
</style>